<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { init } from '../../echarts-utils';
import type { ECOption } from '../../echarts-utils';

const props = defineProps<{
  index: number;
  name: string;
  value: number;
}>();
const chart = ref<HTMLElement>();

function initChart() {
  const myChart = init(chart.value);
  myChart.setOption({
    xAxis: {
      type: 'value',
      min: 0,
      max: 100000,
      show: false
    },
    yAxis: {
      type: 'category',
      show: false
    },
    series: [
      {
        type: 'bar',
        data: [props.value],
        barWidth: 10,
        itemStyle: {
          borderRadius: [10, 10, 10, 10]
        },
        showBackground: true,
        backgroundStyle: {
          borderRadius: [10, 10, 10, 10]
          // borderWidth: 1,
          // borderColor: '#fff'
        }
      }
    ],
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }
  } as ECOption);
}

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="item row">
    <div class="col-2 text-center">NO.{{ index }}</div>
    <div class="col-3 text-center">{{ name }}</div>
    <div ref="chart" class="col"></div>
    <div class="col-1 q-ml-md">{{ (value / 10000).toFixed(2) }}w</div>
  </div>
</template>

<style scoped>
.item {
  width: 351px;
  height: 36px;
  color: #fff;
}
</style>
